<template>
  <view class="ranking-container">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-title">邀请排行榜</view>
    </view>
    
    <!-- 筛选选项 -->
    <view class="filter-section">
      <view class="filter-row">
        <view class="filter-label">时间范围：</view>
        <view class="filter-options">
          <view 
            v-for="(period, index) in periodOptions" 
            :key="index"
            :class="['filter-option', { active: currentPeriod === period.value }]"
            @click="switchPeriod(period.value)"
          >
            {{ period.label }}
          </view>
        </view>
      </view>
      
      <view class="filter-row">
        <view class="filter-label">排序方式：</view>
        <view class="filter-options">
          <view 
            v-for="(type, index) in typeOptions" 
            :key="index"
            :class="['filter-option', { active: currentType === type.value }]"
            @click="switchType(type.value)"
          >
            {{ type.label }}
          </view>
        </view>
      </view>
    </view>
    
    <!-- 我的排名 -->
    <view class="my-ranking" v-if="myRanking">
      <view class="ranking-header">我的排名</view>
      <view class="ranking-item my-rank">
        <view class="rank-number">{{ myRanking.rank }}</view>
        <view class="user-info">
          <image 
            :src="myRanking.user.avatar || '/static/icons/default-avatar.png'" 
            class="user-avatar"
          />
          <view class="user-name">{{ myRanking.user.nickname || '我' }}</view>
        </view>
        <view class="ranking-stats">
          <view class="stat-item">
            <view class="stat-value">{{ myRanking.inviteCount }}</view>
            <view class="stat-label">邀请数</view>
          </view>
          <view class="stat-item">
            <view class="stat-value">{{ myRanking.totalRewards }}</view>
            <view class="stat-label">总奖励</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 排行榜列表 -->
    <view class="ranking-list">
      <view class="list-header">
        <view class="header-title">排行榜</view>
        <view class="header-subtitle">共{{ rankingData.length }}位用户</view>
      </view>
      
      <view 
        v-for="(item, index) in rankingData" 
        :key="index"
        class="ranking-item"
      >
        <view class="rank-number" :class="[item.rank === 1 ? 'rank-first' : '', item.rank === 2 ? 'rank-second' : '', item.rank === 3 ? 'rank-third' : '']">
          <text v-if="item.rank <= 3" class="rank-icon">{{ getRankIcon(item.rank) }}</text>
          <text v-else>{{ item.rank }}</text>
        </view>
        
        <view class="user-info">
          <image 
            :src="item.user.avatar || '/static/icons/default-avatar.png'" 
            class="user-avatar"
          />
          <view class="user-name">{{ item.user.nickname || '用户' + item.user.id }}</view>
        </view>
        
        <view class="ranking-stats">
          <view class="stat-item">
            <view class="stat-value">{{ item.inviteCount }}</view>
            <view class="stat-label">邀请数</view>
          </view>
          <view class="stat-item">
            <view class="stat-value">{{ item.totalRewards }}</view>
            <view class="stat-label">总奖励</view>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="rankingData.length === 0 && !isLoading">
        <image src="/static/icons/empty.png" class="empty-icon" />
        <view class="empty-text">暂无排行数据</view>
      </view>
      
      <!-- 加载状态 -->
      <view class="loading-state" v-if="isLoading">
        <view class="loading-text">加载中...</view>
      </view>
    </view>
    
    <!-- 奖励说明 -->
    <view class="reward-info">
      <view class="info-title">排行榜奖励</view>
      <view class="info-content">
        <view class="reward-item">
          <view class="reward-rank">🥇 第1名</view>
          <view class="reward-desc">额外奖励1000积分</view>
        </view>
        <view class="reward-item">
          <view class="reward-rank">🥈 第2名</view>
          <view class="reward-desc">额外奖励500积分</view>
        </view>
        <view class="reward-item">
          <view class="reward-rank">🥉 第3名</view>
          <view class="reward-desc">额外奖励300积分</view>
        </view>
        <view class="reward-item">
          <view class="reward-rank">🏅 前10名</view>
          <view class="reward-desc">额外奖励100积分</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getInviteRanking } from '@/api/invitations.js'

export default {
  name: 'InviteRankingPage',
  
  data() {
    return {
      currentPeriod: 'all',
      currentType: 'count',
      periodOptions: [
        { label: '全部', value: 'all' },
        { label: '本月', value: 'month' },
        { label: '本周', value: 'week' }
      ],
      typeOptions: [
        { label: '邀请数', value: 'count' },
        { label: '奖励积分', value: 'rewards' }
      ],
      rankingData: [],
      myRanking: null,
      isLoading: false
    }
  },
  
  onLoad() {
    this.loadRankingData()
  },
  
  onPullDownRefresh() {
    this.loadRankingData().finally(() => {
      uni.stopPullDownRefresh()
    })
  },
  
  methods: {
    /**
     * 切换时间范围
     */
    switchPeriod(period) {
      if (this.currentPeriod === period) return
      
      this.currentPeriod = period
      this.loadRankingData()
    },
    
    /**
     * 切换排序方式
     */
    switchType(type) {
      if (this.currentType === type) return
      
      this.currentType = type
      this.loadRankingData()
    },
    
    /**
     * 加载排行榜数据
     */
    async loadRankingData() {
      if (this.isLoading) return
      
      this.isLoading = true
      
      try {
        const params = {
          period: this.currentPeriod,
          type: this.currentType,
          limit: 100
        }
        
        const result = await getInviteRanking(params)
        
        if (result.success) {
          this.rankingData = result.data
          
          // 查找我的排名
          const currentUserId = this.getCurrentUserId()
          if (currentUserId) {
            this.myRanking = this.rankingData.find(item => item.user.id === currentUserId)
          }
        } else {
          this.showError(result.message || '加载排行榜失败')
        }
      } catch (error) {
        console.error('加载排行榜失败:', error)
        this.showError('加载排行榜失败')
      } finally {
        this.isLoading = false
      }
    },
    
    /**
     * 获取当前用户ID
     */
    getCurrentUserId() {
      // 从store或缓存中获取当前用户ID
      try {
        const userInfo = uni.getStorageSync('userInfo')
        return userInfo ? userInfo.id : null
      } catch (error) {
        return null
      }
    },
    
    /**
     * 获取排名样式类
     */
    getRankClass(rank) {
      if (rank === 1) return 'rank-first'
      if (rank === 2) return 'rank-second'
      if (rank === 3) return 'rank-third'
      return ''
    },
    
    /**
     * 获取排名图标
     */
    getRankIcon(rank) {
      const icons = {
        1: '🥇',
        2: '🥈',
        3: '🥉'
      }
      return icons[rank] || rank
    },
    
    /**
     * 显示错误提示
     */
    showError(message) {
      uni.showToast({
        title: message,
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ranking-container {
  min-height: 100vh;
  background: #f5f5f5;
}

.nav-bar {
  background: white;
  padding: 20rpx 40rpx;
  text-align: center;
  border-bottom: 1rpx solid #e0e0e0;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.filter-section {
  background: white;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #e0e0e0;
}

.filter-row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.filter-label {
  font-size: 28rpx;
  color: #333;
  margin-right: 20rpx;
  min-width: 120rpx;
}

.filter-options {
  display: flex;
  flex: 1;
}

.filter-option {
  padding: 12rpx 24rpx;
  margin-right: 16rpx;
  font-size: 26rpx;
  color: #666;
  background: #f5f5f5;
  border-radius: 20rpx;
  transition: all 0.3s ease;
  
  &.active {
    background: #667eea;
    color: white;
  }
}

.my-ranking {
  margin: 20rpx;
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.ranking-header {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.my-rank {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 12rpx;
  padding: 24rpx;
  
  .rank-number {
    color: white !important;
  }
  
  .user-name {
    color: white !important;
  }
  
  .stat-value {
    color: white !important;
  }
  
  .stat-label {
    color: rgba(255, 255, 255, 0.8) !important;
  }
}

.ranking-list {
  margin: 20rpx;
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #e0e0e0;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.header-subtitle {
  font-size: 24rpx;
  color: #666;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.rank-number {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: bold;
  color: #666;
  margin-right: 24rpx;
  
  &.rank-first {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: white;
    border-radius: 50%;
  }
  
  &.rank-second {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: white;
    border-radius: 50%;
  }
  
  &.rank-third {
    background: linear-gradient(135deg, #cd7f32, #daa520);
    color: white;
    border-radius: 50%;
  }
}

.rank-icon {
  font-size: 32rpx;
}

.user-info {
  display: flex;
  align-items: center;
  flex: 1;
  margin-right: 20rpx;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.ranking-stats {
  display: flex;
}

.stat-item {
  text-align: center;
  margin-left: 32rpx;
  
  &:first-child {
    margin-left: 0;
  }
}

.stat-value {
  font-size: 28rpx;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 4rpx;
}

.stat-label {
  font-size: 22rpx;
  color: #666;
}

.empty-state {
  text-align: center;
  padding: 120rpx 40rpx;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 32rpx;
}

.empty-text {
  font-size: 32rpx;
  color: #666;
}

.loading-state {
  text-align: center;
  padding: 60rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #666;
}

.reward-info {
  margin: 20rpx;
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.info-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
}

.info-content {
  space-y: 16rpx;
}

.reward-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.reward-rank {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

.reward-desc {
  font-size: 26rpx;
  color: #52c41a;
  font-weight: bold;
}
</style>